<!-- 合同-基础设置-合同类型及模板-分组排序 -->
<template>
  <a-modal
    width="60%"
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    draggable
    title-align="center"
    unmountOnClose
  >
    <template #title> 分组排序 </template>
    <main>
      <section>
        <a-space direction="vertical">
          <h3>使用指南</h3>
          <span>1、鼠标移动到审批分组上方拖曳进行排序</span>
          <span>2、保存使新排序生效</span>
        </a-space>

        <draggable
          class="list-group"
          :list="list.data"
          itemKey="id"
          handle=".move"
          animation="300"
          :fallback-class="true"
          :fallback-on-body="true"
          :touch-start-threshold="10"
          :fallback-tolerance="10"
          ghost-class="ghost"
          :sort="true"
        >
          <template #item="{ element }">
            <div class="list-group-item move">
              <icon-font
                type="icon-a-Dragtuozhuai"
                :size="16"
                class="cursor-pointer"
              ></icon-font>
              <span
                :style="{
                  marginLeft: '10px'
                }"
              >
                {{ element.name }}
              </span>
            </div>
          </template>
        </draggable>
      </section>
    </main>
  </a-modal>
</template>

<script lang="ts" setup>
import { cloneDeep } from 'lodash';
import draggable from 'vuedraggable';
const props = withDefaults(
  defineProps<{
    visible: boolean; // 是否显示对话框
    data?: any; // 传进来的数据,
  }>(),
  {}
);

const emits = defineEmits(['update:visible', 'sortEmit']);

const list = reactive({
  data: [
    {
      name: '合同',
      id: 1
    },
    {
      name: '协议',
      id: 2
    },
    {
      name: '企业公文',
      id: 3
    }
  ]
});

watch(
  () => props.visible,
  (newVal: boolean) => {
    if (newVal) {
      list.data = cloneDeep(props.data);
      //
    }
  }
);

const handleOk = async () => {
  list.data = list.data.map((item: any, index: number) => {
    return {
      ...item,
      sort: index + 1
    };
  });
  emits('sortEmit', list.data);
  emits('update:visible', false);
};

const handleCancel = () => {
  emits('update:visible', false);
};
</script>

<style scoped lang="less">
.list-group {
  margin-top: 10px;
  border: 1px solid #eee;
  &-item {
    height: 50px;
    line-height: 50px;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    padding: 10px;
    &:hover {
      background-color: #f1f4ff;
    }
  }
}
</style>
